// 商家分布图表
<template>
  <div class="com-container" @dblclick="revertMap">
      <div class="com-chart" ref="map_ref"></div>
  </div>
</template>
  
<script>
import axios from 'axios'
import { getProvinceMapInfo} from '../utils/map_utils'
export default {
    data(){
        return{
            chartInstance :null,
            allDate:null,
            mapData:{},//对地图 矢量数据进行缓存
        }
    },
    mounted(){
        this.initChart()
        this.getData()
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter)
    },
    methods:{
      async initChart(){
            this.chartInstance = echarts.init(this.$refs.map_ref,'chalk')
            
             
            //获取中国地图的矢量数据
            //http://localhost:8999/static/map/china.json
            //由于我们现在获取的地图矢量数据并不是位于koa2的后台，所以不能使用this.http
            const ret = await axios.get('http://localhost:8999/static/map/china.json')
            console.log(typeof(ret));
            echarts.registerMap('china',ret.data)
            const initOption ={
                title:{
                    text:'▎ 商家分布',
                    left:20,
                    top:20,
                },
                geo:{
                    type:'map',
                    map:'china',
                    top:'5%',
                    bottom:'5%',
                    itemStyle:{
                        areaColor:'#2E72BF',
                        borderColor:'pink'
                    }
                    
                },
                legend:{
                    left:'8%',
                    bottom:'8%',
                    orient:'vertical'
                }
            }
            this.chartInstance.setOption(initOption,true)
            this.chartInstance.on('click', async arg=>{
                // arg.name 得到的省份，得到的是中文
                const ProvinceInfo  = getProvinceMapInfo(arg.name)
                console.log(ProvinceInfo);
                //需要获取这个地图的矢量数据
                //判断当前所点击的省份的地图矢量数据在mapdata中是否存在
                if(!this.mapData[ProvinceInfo.key]){
                    const ret  = await axios.get('http://localhost:8999'+ProvinceInfo.path)
                    this.mapData[ProvinceInfo.key] = ret.data
                    echarts.registerMap(ProvinceInfo.key,ret.data)
                } 
                 const changeOption = {
                     geo:{
                         map:ProvinceInfo.key
                     }
                 }
                 this.chartInstance.setOption(changeOption)
            })
        },
        async getData(){
            //获取服务器的数据，对this，alldata进行赋值之后。调用updatechart方法更新图表
            const {data :ret} = await this.$http.get('map')
            this.allDate = ret
            console.log(ret);
            this.updateChart()
        },
        updateChart(){
            //处理图表需要的数据c
            //图例的数据
            const legendArr = this.allDate.map(item=>{
                return item.name
            })
            const seriesArr = this.allDate.map(item =>{
                //return 这个对象就代表的是一个类别下的所有散点数据
                //想在地图上显示散点的数据，所以我们需要给散点图的图表增加一个配置，coordinateSystem：geo
                return {
                    type:'effectScatter',
                    rippleEffect:{
                        scale:5,
                        brushType:'stroke'
                    },
                    name:item.name,
                    data:item.children,
                    coordinateSystem:'geo',
                }
            })
            const dataOption ={
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        screenAdapter(){
            const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                legend:{
                    itemWith:titleFontSize/3,
                    itemHeight:titleFontSize/3,
                    itemGap:titleFontSize/3,
                    textStyle:{
                        fontSize:titleFontSize/3
                    }
                }
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        revertMap(){
            const revertOption = {
                geo:{
                    map:'china'
                }
            }
            this.chartInstance.setOption(revertOption)
        }

    }
}
</script>

<style>

</style>
